<template>
    <div
        class="button"
        @click="onClick">
        <span>{{ $st(text[status]) }}</span>
        <transition
            name="arrow"
            mode="out-in">
            <van-icon
                key="up"
                v-if="status == 1"
                name="arrow-up" />
            <van-icon
                key="down"
                v-else-if="status == 0"
                name="arrow-down" />
        </transition>
    </div>
</template>

<script lang="js">
import { reactive, toRefs } from 'vue';
export default {
    name: 'App',
    props: {
        isExpand: Boolean
    },
    setup (prop, context) {
        const state = reactive({
            status: 0, // 0 关闭  1 展开
            text: ['wp_Expand', 'wp_Collapse']
        });

        const onClick = () => {
            state.status = (state.status + 1) % 2;
            switch (state.status) {
            case 0:
                // alert(state.status);
                context.emit('update:isExpand', false);
                break;
            case 1:
                // alert(state.status);
                context.emit('update:isExpand', true);
                break;
            default:
                break;
            }
        };

        return {
            onClick,
            ...toRefs(state)
        };
    }
};
</script>

<style lang='scss' scoped>
.button {
  min-width: 40px;
  font-size: 13px;
}
.arrow-enter-active,
.arrow-leave-active {
  transition: transform 0.2s ease;
}
.arrow-enter, .arrow-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: rotate(180deg);
}
</style>
